<template>
  <div class="login">
    <div class="login_box">
      <div class="logo_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- ref  获取当前实例对象   model  数据双向绑定 rules 表单验证规则-->
      <el-form ref="loginFromRef" :model="loginForm"  :rules="rules" class="login_form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-from-item class="btns">
          <el-button type="primary" @click="resetLoginForm">重置</el-button>
          <el-button type="success" @click="login">登录</el-button>
        </el-from-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
      data() {
        return {
          loginForm: {
            username: '20170311',
            password: '123456',
          },
          rules :{
            username:[
              {required:true, message:'请输入账户名', trigger:'blur'},
              {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
            ],
            password:[
              {required:true, message:'请输入密码',trigger:'blur'},
              {min:6,max:12,message:'长度在6到12个字符',trigger:'blur'}
            ]
          }
        }
      },
      methods: {
        resetLoginForm() {
          this.$refs.loginFromRef.resetFields()
        },
        login() {
          const that = this
            this.axios.get('http://localhost:8090/login/'+that.loginForm.username+'/'+that.loginForm.password).then(res=>{
              window.sessionStorage.setItem('token',that.loginForm.username)
              if(res.data==1) {
                this.$router.push('/home')
                this.$message.success('欢迎您!管理员')
                }else if(res.data==2){
                this.$router.push('/hotelhome')
                this.$message.success('欢迎您!酒店商家')
                }else if(res.data==3){
                this.$router.push('/userhome')
                this.$message.success('欢迎您!')
                }else{
                  this.$message.error('账号密码不正确!!!')
                }
              })
        }
      }
    }
</script>

<style scoped>
 .login{
    background-color: #2b4b6b;
    height: 100%;
  }
  .login_box{
    width:450px;
    height:300px;
    background-color: #fff;
    border-radius: 3px;
    position:absolute;
    /* 上面表示绝对定位 */
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    }
    .logo_box {
      height:130px;
      width:130px;
      border: 1px solid  #eee;
      border-radius: 50%;
      box-shadow:0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #fff;
      }
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
       }
       .login_form{
         position: absolute;
         bottom: 20px;
         width: 100%;
         padding: 0 20px;
         box-sizing: border-box;
       }
       .btns{
         display: flex;
         /* 弹性盒模型 */
         justify-content: flex-end;
         /* 横轴上，尾部对齐 */

       }

</style>
